<template>
  <div class="container">
    <el-page-header @back="goBack" content="车辆轨迹"></el-page-header>
    <el-row type="flex" justify="space-between" class="nav-bar">
      <el-col :span="3">
        <!-- <el-button type="primary" icon="el-icon-plus" plain @click="create">新建账号</el-button> -->
      </el-col>
      <el-col class="text-right">
        <el-form :inline="true" label-width="auto" class="nav-bar-form">
          <el-form-item label="日期">
            <el-date-picker type="date" placeholder="选择日期" v-model="search.date" format="yyyy-MM-dd"
              value-format="yyyy-MM-dd" style="width: 100%;"></el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="getTrajectory">查询</el-button>
            <el-button type="primary" @click="startAnimation">开始动画</el-button>
            <el-button type="primary" @click="pauseAnimation">暂停动画</el-button>
            <el-button type="primary" @click="resumeAnimation">继续动画</el-button>
            <el-button type="primary" @click="stopAnimation">停止动画</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
      <div class="map-center" id="container">

      </div>

  </div>
</template>

<script>
  export default {
    layout: 'admin',
    head() {
      return {
        title: '车辆轨迹' 
      }
    },
    data() {
      return {
        search: {
          date: '',
          id: 0,
        },
        gpsData: [],
        trajectorys: [],
        map: null,
        AMap: null,
        mapInit: false,
        marker: null,
        massMarks:null
      }
    },
    watch: {
      'search.date'() {
        this.getTrajectory();
      },
      'gpsData'() {
        this.trajectorys = [];
        if(this.map){
          this.map.clearMap();
          if(this.massMarks)
          this.map.remove(this.massMarks);
        }
        this.gpsToWGS84(0);
      }
    },
    mounted() {
      this.search.id = this.$route.query.id;
      var date=new Date();
      this.search.date= date.getFullYear()+"-"+(date.getMonth()+1)+"-"+(date.getDate());
    },
    methods: {
      gpsToWGS84(i) {
        if (this.map == null) {
          if (!this.mapInit) {
            this.mapInit = true;
            this.$AMapLoader.load({
              key: this.AMapSetting.key, // 申请好的Web端开发者Key，首次调用 load 时必填
              version: this.AMapSetting.version, // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
              plugins: ['AMap.Geocoder'],
            }).then((AMap) => {
              this.AMap = AMap;
              this.map = new this.AMap.Map("container", { //设置地图容器id
                zoom: 12, //设置地图的缩放级别
                zooms:[3,20],
                resizeEnable: true,
                expandZoomRange:true,
                center: [113.042648, 23.625349], //初始化地图中心点位置
              });
              this.gpsToWGS84(0);
            }).catch(e => {
              console.log(e);
            })
          }
          return;
        }
        if (this.gpsData.length == 0) return;
        var that = this;
        var newlngLatArr = [];
        this.gpsData.slice(i, i += 40).forEach(function(e) {
          newlngLatArr.push(new that.AMap.LngLat(e.lng, e.lat));
        });
        this.AMap.convertFrom(newlngLatArr, 'gps', function(status, result) {
          //alert(JSON.stringify(result));
          that.trajectorys = that.trajectorys.concat(result.locations);
          if (that.gpsData.length > i) {
            that.gpsToWGS84(i);
          } else {
            that.drawTrajectory();
          }
        });
      },
      startAnimation() {
        this.marker.moveAlong(this.trajectorys, 10000);
      },

      pauseAnimation() {
        this.marker.pauseMove();
      },
      resumeAnimation() {
        this.marker.resumeMove();
      },
      stopAnimation() {
        this.marker.stopMove();
      },
      drawTrajectory() {
        this.marker = new this.AMap.Marker({
          map: this.map,
          position: this.trajectorys[this.trajectorys.length - 1],
          icon: "https://webapi.amap.com/images/car.png",
          offset: new this.AMap.Pixel(-26, -13),
          autoRotation: true,
          angle: -90,
        });
        // 绘制轨迹
        var polyline = new this.AMap.Polyline({
          map: this.map,
          path: this.trajectorys,
          showDir: true,
          strokeColor: "#28F", //线颜色
          // strokeOpacity: 1,     //线透明度
          strokeWeight: 6, //线宽
          // strokeStyle: "solid"  //线样式
        });
        var passedPolyline = new this.AMap.Polyline({
          map: this.map,
          // path: lineArr,
          strokeColor: "#AF5", //线颜色
          // strokeOpacity: 1,     //线透明度
          strokeWeight: 6, //线宽
          // strokeStyle: "solid"  //线样式
        });
        this.marker.on('moving', function(e) {
          passedPolyline.setPath(e.passedPath);
        });
        var style = [
          {
          //停留 小于10分钟
            url: 'https://a.amap.com/jsapi_demos/static/images/mass0.png',
            anchor: new this.AMap.Pixel(6, 6),
            size: new this.AMap.Size(11, 11)
        },
          {
          //停留 小于30分钟
            url: 'https://a.amap.com/jsapi_demos/static/images/mass2.png',
            anchor: new this.AMap.Pixel(8, 8),
            size: new this.AMap.Size(15, 15)
        },
          {
          //停留 大于30分钟
            url: 'https://a.amap.com/jsapi_demos/static/images/mass2.png',
            anchor: new this.AMap.Pixel(10, 10),
            size: new this.AMap.Size(20, 20)
        },
        {
          //经过
            url: 'https://a.amap.com/jsapi_demos/static/images/mass1.png',
            anchor: new this.AMap.Pixel(4, 4),
            size: new this.AMap.Size(7, 7)
        },{
          //起点
            url: 'https://a.amap.com/jsapi/static/image/plugin/marker/start.png',
            anchor: new this.AMap.Pixel(13, 30),
            size: new this.AMap.Size(25, 30)
        }
        ];

        var data = [];
        for(var i=0;i<this.gpsData.length;i++){
          var residence=this.gpsData[i].residencetime!="00:00:00";
          var styleIndex=3;
          if(i==0){
            styleIndex=4;
          }else if(residence){
            if(this.gpsData[i].residencetime<"00:10:00"){
              styleIndex=0;
            }else if(this.gpsData[i].residencetime<"00:30:00"){
              styleIndex=1;
            }else{
              styleIndex=2;
            }
          }
          data.push({
            lnglat:[this.trajectorys[i].lng,this.trajectorys[i].lat],
            name:this.gpsData[i].date+(residence?("~"+this.gpsData[i].lastdate +" 停留时间"+this.gpsData[i].residencetime):""),
            id:this.gpsData[i].id,
            style:styleIndex
          });
        }

        // 实例化 AMap.MassMarks
        this.massMarks = new this.AMap.MassMarks(data,{
          zIndex: 160, 	// 海量点图层叠加的顺序
          zooms: [3, 20],	 // 在指定地图缩放级别范围内展示海量点图层
          style: style 	//多种样式对象的数组
        });
      var marker = new AMap.Marker({content: ' ', map: this.map});
      this.massMarks.on('mouseover', function (e) {
           marker.setPosition(e.data.lnglat);
           //marker.setzIndex(200);
           marker.setLabel({content: e.data.name})
       });


        // 将 massMarks 添加到地图实例
        this.massMarks.setMap(this.map);
        this.map.setFitView();
        this.map.setCenter(this.trajectorys[0]);
        this.map.setZoom(12);
      },

      goBack() {
        this.$router.go(-1)
      },

      getTrajectory() {
        return this.$axios.post('/Operator/Vehicle/Trajectory', this.search).then((res) => {
          this.gpsData = res.rows
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .user-basic-box {
    // background: url(/images/bg2.jpg);
    background-size: 100%;
    background-position: center;

    .user-face {
      text-align: center;
      width: 100px;
      margin: 0 auto;
      position: relative;

      .avatar {
        .iconfont {
          font-size: 14px;
          position: absolute;
          right: 3px;
          top: 6px;
          background-color: #fff;
          height: 22px;
          width: 22px;
          line-height: 24px;
          border-radius: 100%;
        }

        .male {
          background: var(--blue);
          color: #fff;
        }

        .female {
          background: var(--pink);
          color: #fff;
        }
      }
    }

    .basic {
      font-size: 14px;
      align-items: center;
      justify-content: center;
      margin-top: 15px;

      .item {
        margin: 0 10px;
      }
    }
  }


  .statistics-content {
    display: flex;
    text-align: center;

    .item {
      &+.item {
        border-left: 1px solid var(--light);
        padding-left: 30px;
      }

      .icon {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        border: 1px solid var(--light);
        background-color: #f2f3f5;
        padding: 5px;
        margin: 0 20px 0 0;
        box-shadow: 3px 2px 11px 0 rgb(70 70 70 / 22%);
      }

      label {
        color: var(--grey);
        font-size: 12px;
        margin-bottom: 5px;
        display: block;
      }

      .num {
        font-size: 30px;
      }
    }
  }

  .map-center {
    width: 100%;
    height: 710px;
    // background-image: url("@/static/images/map.png");
    background-position: center;
    background-size: cover;
  }
</style>
